import React from "react";
import Tab from '../common/Tab'

const Type = () => {
    const [active, setActive] = React.useState(0);
    const [list, setList] = React.useState([]);

    const navigate = React.$Router.useNavigate()

    React.useEffect(() => {
        getProductData()
    }, [])

    const getProductData = async () => {
        const result = await React.$Api.ProductData()

        if (result.code === 1) {
            setList(result.data)
        }
    }

    const TypeList = () => {
        return (
            <React.$Vant.Sidebar
                value={active}
                onChange={(index) => {
                    setActive(index);
                }}
            >
                {
                    list.map((item, index) => {
                        return (
                            <React.$Vant.Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.name}>
                                {
                                    item.product.map((product, index) => {
                                        return (
                                            <React.$Router.NavLink to={`/product/product/info?id=${product.id}`}>
                                                <React.$Vant.Cell
                                                    center
                                                    key={index}
                                                    title={product.name}
                                                    icon={<React.$Vant.Image width={44} height={44} src={product.thumb_cdn} round />}
                                                    isLink
                                                />
                                            </React.$Router.NavLink>
                                        )
                                    })
                                }
                            </React.$Vant.Sidebar.Item>
                        )
                    })
                }
            </React.$Vant.Sidebar>
        )

    }



    return (
        <>
            <TypeList />

            <Tab />
        </>
    )
}

export default Type